<template>
	<view>
		<view class="header">
			<image src="../../static/images/profile/bg.png" mode="" class="bg"></image>
			<view class="user">
				<navigator class="avatar" url="/subpkg/userDetail/userDetail">
					<image src="../../static/images/profile/student.png" mode=""></image>
				</navigator>
				<view class="right">
					<text class="role">{{ name }}</text>
					<text class="name">{{ position }}</text>
				</view>
			</view>
		</view>

		<view class="body">
			<view class="head">
				软件设置
			</view>
			<view class="setting-list">
				<view class="setting-item" v-for="(item, index) in settingList" :key="index" @click="navigate(index)">
					<uni-icons :type="item.icon" color="#67c3a8" size="23" class="icon"></uni-icons>
					<text class="type">{{ item.text }}</text>
					<uni-icons type="right" style="float: right;"></uni-icons>
				</view>

				<view class="setting-item">
					<uni-icons type="help" color="#67c3a8" size="23" class="icon"></uni-icons>
					<uni-link href="https://docs.qq.com/form/page/DWFBmSUV0R1RHc25n?_w_tencentdocx_form=1#/fill"
						text="帮助反馈" showUnderLine=false color="#333" fontSize="20rpx"></uni-link>
						<text class="type">帮助反馈</text>
					<uni-icons type="right" style="float: right;"></uni-icons>
				</view>

				<view class="setting-item" @click="logout">
					<uni-icons type="undo" color="#67c3a8" size="23" class="icon"></uni-icons>
					<text class="type">退出登录</text>
					<uni-icons type="right" style="float: right;"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				settingList: [{
						icon: 'notification',
						text: '实时通知'
					},
					{
						icon: 'download',
						text: '检查更新'
					},
					{
						icon: 'auth',
						text: '信息绑定'
					},
					{
						icon: 'mail-open',
						text: '邀请用户'
					},
					{
						icon: 'info',
						text: '关于软件'
					},
					// {
					// 	icon: 'help',
					// 	text:'帮助反馈'
					// },
					// {
					// 	icon: 'undo-filled',
					// 	text:'退出登录'
					// }
				]
			};
		},
		onLoad() {
		},
		computed: {
			position() {
				if (this.$store.state.userInfo.role === 3) return 'Student'
				if (this.$store.state.userInfo.role === 2) return 'Teacher'
				if (this.$store.state.userInfo.role === 1) return 'Super Manager'
			},
			name() {
				return this.$store.state.userInfo.username
			}
		},
		methods: {
			navigate(index) {
				if (index === 0) {
					return uni.showModal({
						title: '通知',
						content: '项目开发中···'
					})
				}
				if(index === 2) {
					uni.navigateTo({
						url: '/subpkg/bind/bind'
					})
				}
				if(index === 3) {
					if(this.$store.state.userInfo.role !== 1){
						return uni.showModal({
							title: '当前非管理员',
							content: '请先申请权限'
						})
					}
					uni.navigateTo({
						url: '/subpkg/inviteCode/inviteCode'
					})
				}
				if(index === 4) {
					uni.navigateTo({
						url: '/subpkg/regards/regards'
					})
				}
				if(index === 1) {
					uni.$showMsg('暂无最新版本')
				}
			},
			logout() {
				uni.showModal({
					title: '确定退出登录么',
					content: '下次访问将重新登录',
					success: function(res) {
						if (res.confirm) {
							uni.showToast({
								title: '已退出',
								success() {
									uni.removeStorageSync('token')
									setTimeout(() => {
										uni.navigateTo({
											url: '/pages/login/login'
										})
									}, 500)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #fefefe;
	}

	.header {


		.bg {
			width: 100%;
		}

		.user {
			position: absolute;
			top: 230rpx;
			left: 50rpx;
			display: flex;

			.avatar {
				overflow: hidden;
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.right {
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-left: 20rpx;
				color: #FFFFFF;
				.role {
					font-size: 40rpx;
					margin-bottom: 10rpx;
				}

				.name {
					font-size: 30rpx;
				}
			}
		}
	}

	.body {
		width: 85%;
		margin: 0 auto;

		.head {
			height: 65rpx;
			line-height: 65rpx;
			font-size: 26rpx;
			color: #ccc;
			border-bottom: 2px solid #e9e9e9;
		}

		.setting-list {
			.setting-item {
				position: relative;
				height: 90rpx;
				padding: 0 15rpx;
				border-bottom: 2px solid #e9e9e9;
				line-height: 86rpx;
				.icon {}

				.type {
					position: absolute;
					top: -4rpx;
					left: 80rpx;
					font-size: 28rpx;
				}
			}
		}
	}
</style>
